<!-- 开吃吧详情 -->
<template>
	<Layout :pagebg="1" class-name="strategy_detail">
    <fa-navbar title="开溜吧"></fa-navbar>
    <swiper v-if="detail && banner && banner.length >0" class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
      :duration="duration" indicator-active-color="#4FAD95">
      <swiper-item v-for="(item, index) in banner" :key="index">
        <image :src="item" mode="" class="img"></image>
      </swiper-item>
    </swiper>
    <view v-if="detail" class="box strategy_detail_box">
      <view class="title f36 b">{{detail.title}}</view>
      <view class="intro mb60">
        <u-parse :html="detail.content"></u-parse>
      </view>
    </view>
    <view class="line"></view>
    
    <view class="comment paddLR">
      <view class="comment-tit">
        <text class="f28 b color-000">评论</text>
        <text class="color-888 f22 ml15">(260条)</text>
      </view>
      <form action="" @submit="submit">
        <view class="form flex-lect">
          <image src="/static/map.png" class="img70" mode=""></image>
          <view class="flex-1 ml15">
            <input type="text" v-model="content" class="text" :placeholder="k" />
          </view>
          <view @click="submit">提交</view>
        </view>
      </form>
      
      <view class="comment-list">
        <view class="item">
          <view class="flex-be">
            <image src="/static/map.png" class="img70" mode=""></image>
            <view class="div flex-1 ml15">
              <view class="color-888 flex-bect">
                <text class="name f24">火星用户246</text>
                <text class="time f22">06.10</text>
              </view>
              <view class="intro">是一直想去打卡的地方 <text class="color-primary ml15">回复</text></view>
            </view>
          </view>
          <view class="item">
            <view class="flex-be">
              <image src="/static/map.png" class="img70" mode=""></image>
              <view class="div flex-1 ml15">
                <view class="color-888 flex-bect">
                  <text class="name f24">火星用户246</text>
                  <text class="time f22">06.10</text>
                </view>
                <view class="intro">是一直想去打卡的地方 <text class="color-primary ml15">回复</text></view>
              </view>
            </view>
            <view class="item">
              <view class="flex-be">
                <image src="/static/map.png" class="img70" mode=""></image>
                <view class="div flex-1 ml15">
                  <view class="color-888 flex-bect">
                    <text class="name f24">火星用户246</text>
                    <text class="time f22">06.10</text>
                  </view>
                  <view class="intro">是一直想去打卡的地方 <text class="color-primary ml15">回复</text></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="tips">来抢首评，留下你的想法~</view>
      <view class="tips">到底啦~~~</view>
    </view>
  </Layout>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
        banner:[],
        detail:null,
        k:'说点什么...',
        
        content:'', // 评论内容
        pid:'', // 评论的上一级
			}
		},
    onLoad(e){
      uni.showLoading()
      this.$api.mukbangDetailApi({id: e.id}).then(res=>{
        this.detail = res.data;
        if(res.data && res.data.image_text){
          this.banner = [res.data.image_text]
        }
        uni.hideLoading()
      }).catch(()=>{
        uni.hideLoading()
      })
    },
		methods: {
			submit() {
				console.log('提交评论')
        this.$api.traveCommentApi({
          content: this.content,
          activity_id: this.detail.id,
          pid: this.pid,
        }).then(res=>{
          uni.showToast({
            title: res.msg,
            icon:'none'
          });
          this.content = '';
          this.pid = ""
        })
			},
      chooseTabId(id){
        this.tabId = id
      },
      linkTo(item){
        console.log('进入详情页', item)
        uni.navigateTo({
          url:'/home/match/detail'
        })
      }
		},
    onPageScroll(e) {
      getApp().setNavFixed(this,e)
    },
    onReachBottom() {
      
    }
	}
</script>
<style>
page{background-color: #fff;}
</style>
<style lang="scss" scoped>
.typeTab{
  padding: 30rpx 0 16rpx; border-bottom: 1px solid #EEEEEE; margin-bottom: 20rpx;
  .item{
    display: flex; align-items: center; justify-content: center; height: 60rpx; padding: 0 30rpx; border-radius: 60rpx; margin-right: 30rpx;
    &.on{background-color: #4FAD95; color: #fff;}
  }
  
}
.swiper{
  height: 560rpx;
  .img{width: 100%; height: 560rpx; display: block;}
}
.strategy_detail_box{
  .title{padding: 40rpx 0 46rpx;}
  .map{width: 100%; height: 85rpx;}
  .tit{display: flex; align-items: center; font-size: 28rpx; font-weight: bold; margin-bottom: 24rpx;}
  
}
.line{width: 100%; height: 10rpx; background-color: #FAFAFA;}


.comment{
  .comment-tit{padding: 40rpx 0 36rpx;}
  .tips{color: #888; font-size: 24rpx; text-align: center; padding: 60rpx 0;}
  .text{background-color: #F5F6F8; border-radius: 40rpx; height: 64rpx; width: 100%; padding: 0 16rpx; font-size: 24rpx;}
  
  .comment-list{
    margin-top: 28rpx;
    .item{
      padding-bottom: 20rpx; border-bottom: 1px solid #ededed;
      .item{margin-left: 85rpx;}
      .intro{margin-top: 8rpx; font-size: 26rpx; color: #000; margin-bottom: 20rpx;}
    }
  }
}

</style>
